<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="个人中心"
      style="background:pink"
      @click-left="onClickLeft"
    />

    <!-- 剪裁图片组件 -->
    <van-popup
      class="bg-tran"
      v-model="showCropper"
      closeable
      position="top"
      :style="{ height: '100%' }"
    >
    </van-popup>




<!-- <div class="bb"> -->
    <!-- 上传头像 -->
    <div class="head-img">
      <input
        type="file"
        id="upload"
        style="display: none"
        accept="image/gif,image/jpeg,image/png,image/jpg"
        @change="freshImg"
      />
      <div class="border" @click="uploadIMg">
        {{ headTip }}<img :src="imgsrc" class="imgDiv" />
      </div>
    </div>
    <!-- 登录、注册按钮 -->
    <div class="btn">
      <van-button round type="info" to="/login">登录</van-button>
      <van-button round type="info" to="/zhuce" style="margin-left: 50px"
        >注册</van-button
      >
    </div>
<!-- </div> -->
    <!-- 个人中心功能 -->
    <van-grid clickable>
  <van-grid-item icon="passed" text="立即签到"  />
  <van-grid-item icon="point-gift-o" text="我的福利" />
  <van-grid-item icon="clock-o" text="历史订单" />
  <van-grid-item icon="shop-o" text="积分商城" />
</van-grid>
<van-cell title="我喜欢的" icon="like-o" size="large" is-link />
<van-cell title="我的收藏" icon="star-o" size="large" is-link />
  <van-cell title="积分商城" icon="shop-o" size="large" is-link />
  <van-cell title="设置" icon="setting-o" size="large" is-link />
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
export default {
  name: "UserProfile",
  components: {
    VueCropper,
  },
  data() {
    return {
      imgsrc: require("../assets/logo.png"), //用户没有上传图片的默认头像
      headTip: "点击上传头像",

      showCropper: false, // 截图弹窗遮罩默认隐藏
      imageAccept: "/jpg,/png,/jpeg",
      imageFileName: "",
    };
  },
  methods: {
    // 将本地图片转化为Base64，否则vue-cropper组件显示不出要本地需要剪裁的图片
    imageToBase64(file) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        // 截图框中的图片
        this.option.img = reader.result;
      };
      reader.onerror = function (error) {
        console.log("Error: ", error);
      };
    },

    // 确认剪裁并上传图片
    getCropBlob() {
      this.$comMethods.toast("上传中", 0);
      let formData = new FormData();
      this.$refs.cropper.getCropBlob((data) => {
        formData.append("avatar", data, this.imageFileName);
        // formData私有类对象，访问不到，可以通过get判断值是否传进去
        console.log(formData.get("avatar"));
        // 上传图片至服务器
        this.$api
          .modifyProfile(formData)
          .then((res) => {
            if (res.code === 200) {
              this.$toast("更改头像成功");
              // do something...
            } else {
              this.$toast("上传失败");
            }
          })
          .catch((err) => console.error(err));
      });
    },

    // 旋转图片
    rotateImage() {
      this.$refs.cropper.rotateRight();
    },

    // 取消截图上传头像
    cancelCropper() {
      this.showCropper = false; // 隐藏切图遮罩
      this.showPopup = true;
    },

    // 上传文件过大
    onOversize() {
      this.$notify("图片不能大于3M");
    },

    // 获取文件后缀
    getFileSuffix(fileName) {
      return fileName.match(/\/\w+$/)[0].toLowerCase();
    },

    // 选择图片上传前操作，调起剪裁组件
    beforeRead(file) {
      if (!this.imageAccept.includes(this.getFileSuffix(file.type))) {
        return this.$notify("请上传 jpg/png 格式图片");
      }
      this.showCropper = true;
      this.imageFileName = file.name;
      // 本地图片转成base64，用于截图框显示本地图片
      this.imageToBase64(file);
    },

    onClickLeft() {
      this.$router.push({ name: "Home" });
    },
    uploadIMg: function () {
      document.getElementById("upload").click();
    },
    freshImg: function (e) {
      let _this = this;
      _this.imgObj = e.target.files["0"]; //得到上传的第一个文件
      let fr = new FileReader(); //异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
      fr.onload = function () {
        //在读取操作完成时触发
        _this.imgsrc = fr.result; // 图片文件赋值给图片标签路径
      };
      fr.readAsDataURL(_this.imgObj); //将读取到的文件编码成Data URL
      _this.headTip = ""; // 清空我的提示
    },
  },
};
</script>

<style lang="scss" scoped>

.btn {
   background-color: aqua;
  text-align: center;
  padding-top: 10px;
}
.head-img {
  background-color: aqua;
  text-align: center;
  padding-bottom: 0.2rem;
  .border {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid #c3c3c3;
    overflow: hidden;
    line-height: 5rem;
    text-align: center;
    position: relative;
    .imgDiv {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      z-index: -1;
    }
  }
}

.height100 {
  height: 100vh;
}
.flex-column-center {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.vue-cropper {
  background: #000;
  .cropper-view-box {
    outline: 1px solid #fff !important;
    outline-color: #fff !important;
  }
}

</style>
